<template>
  <div class="home">
    <app-header />
    
    <header class="banner">
      <div class="banner-content">
        <h1 class="animate-title">
          小王闲谈
        </h1>
        <p class="animate-subtitle">
          分享技术，记录生活
        </p>
        <div class="banner-actions">
          <el-button
            v-if="!isMobileDevice"
            type="primary"
            size="large"
            @click="scrollToFeatures"
          >
            了解更多
          </el-button>
          <van-button
            v-else
            type="primary"
            size="large"
            @click="scrollToFeatures"
          >
            了解更多
          </van-button>
        </div>
      </div>
      <div class="banner-waves">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 1440 320"
        >
          <path
            fill="#ffffff"
            fill-opacity="1"
            d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          />
        </svg>
      </div>
    </header>

    <section
      ref="featuresRef"
      class="features"
    >
      <div
        v-for="(feature, index) in features"
        :key="index" 
        v-intersection-observer="{ 
          callback: (entries) => onFeatureIntersect(entries[0], index),
          options: { threshold: 0.5 }
        }"
        class="feature-item"
      >
        <div
          class="feature-icon"
          :class="{ 'animate-in': animatedFeatures[index] }"
        >
          <i
            v-if="!isMobileDevice"
            :class="feature.icon"
          />
          <van-icon
            v-else
            :name="feature.mobileIcon"
          />
        </div>
        <h3 :class="{ 'animate-in': animatedFeatures[index] }">
          {{ feature.title }}
        </h3>
        <p :class="{ 'animate-in': animatedFeatures[index] }">
          {{ feature.description }}
        </p>
      </div>
    </section>

    <section class="latest-articles">
      <h2 class="section-title">
        最新文章
      </h2>
      <div class="article-list">
        <div
          v-for="(article, index) in articles" 
          :key="article.id" 
          v-intersection-observer="{ 
            callback: (entries) => onArticleIntersect(entries[0], index),
            options: { threshold: 0.2 }
          }"
          class="article-item"
          :style="{ animationDelay: index * 0.2 + 's' }"
          :class="{ 'animate-in': animatedArticles[index] }"
        >
          <div class="article-content">
            <h3>{{ article.title }}</h3>
            <p>{{ article.summary }}</p>
            <div class="article-meta">
              <span class="date">{{ article.date }}</span>
              <el-button
                v-if="!isMobileDevice"
                type="text"
                @click="readMore(article)"
              >
                阅读更多
              </el-button>
              <van-button
                v-else
                plain
                type="primary"
                size="small"
                @click="readMore(article)"
              >
                阅读更多
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="cta-section">
      <div
        v-intersection-observer="{ 
          callback: onCtaIntersect,
          options: { threshold: 0.5 }
        }"
        class="cta-content"
        :class="{ 'animate-in': animatedCta }"
      >
        <h2>加入我们的社区</h2>
        <p>关注公众号，获取最新技术动态和优质资源</p>
        <div class="qrcode-container">
          <div class="qrcode">
            <el-image
              v-if="!isMobileDevice"
              src="/qrcode.jpg"
              fit="cover"
            />
            <van-image
              v-else
              src="/qrcode.jpg"
              fit="cover"
            />
          </div>
        </div>
      </div>
    </section>

    <app-footer />

    <!-- 返回顶部按钮 -->
    <el-backtop
      v-if="!isMobileDevice"
      :right="40"
      :bottom="40"
    />
    <van-back-top v-else />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { isMobile } from '@/utils/device'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppFooter from '@/components/layout/AppFooter.vue'

const router = useRouter()
const isMobileDevice = ref(isMobile())
const featuresRef = ref(null)

// 特性数据
const features = [
  {
    icon: 'el-icon-document',
    mobileIcon: 'newspaper-o',
    title: '公众号精选',
    description: '技术干货、行业动态、经验分享'
  },
  {
    icon: 'el-icon-download',
    mobileIcon: 'apps-o',
    title: '软件资源',
    description: '精选优质软件，持续更新中'
  },
  {
    icon: 'el-icon-chat-dot-round',
    mobileIcon: 'friends-o',
    title: '技术交流',
    description: '加入社区，共同成长'
  }
]

const articles = ref([
  {
    id: 1,
    title: 'Vue3 组合式API最佳实践',
    summary: '探索Vue3组合式API的使用技巧和注意事项...',
    date: '2023-08-01'
  },
  {
    id: 2,
    title: '前端性能优化指南',
    summary: '从多个维度提升前端应用性能...',
    date: '2023-07-28'
  },
  {
    id: 3,
    title: '移动端适配方案对比',
    summary: '主流移动端适配方案的优劣分析...',
    date: '2023-07-25'
  }
])

// 动画状态
const animatedFeatures = ref(features.map(() => false))
const animatedArticles = ref(articles.value.map(() => false))
const animatedCta = ref(false)

// 滚动到特性部分
const scrollToFeatures = () => {
  featuresRef.value?.scrollIntoView({ behavior: 'smooth' })
}

// 特性部分的交叉观察回调
const onFeatureIntersect = (entry, index) => {
  if (entry.isIntersecting) {
    animatedFeatures.value[index] = true
  }
}

// 文章部分的交叉观察回调
const onArticleIntersect = (entry, index) => {
  if (entry.isIntersecting) {
    animatedArticles.value[index] = true
  }
}

// CTA部分的交叉观察回调
const onCtaIntersect = (entry) => {
  if (entry.isIntersecting) {
    animatedCta.value = true
  }
}

const readMore = (article) => {
  router.push(`/article/${article.id}`)
}
</script>

<style lang="scss" scoped>
.home {
  .banner {
    position: relative;
    padding: 120px 20px 160px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    overflow: hidden;

    .banner-content {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .animate-title {
      font-size: 3.5em;
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(30px);
      animation: slideUp 0.8s ease forwards;
    }

    .animate-subtitle {
      font-size: 1.5em;
      opacity: 0.9;
      opacity: 0;
      transform: translateY(20px);
      animation: slideUp 0.8s ease 0.2s forwards;
    }

    .banner-actions {
      margin-top: 40px;
      opacity: 0;
      transform: translateY(20px);
      animation: slideUp 0.8s ease 0.4s forwards;
    }

    .banner-waves {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      line-height: 0;
      
      svg {
        position: relative;
        display: block;
        width: 100%;
        height: 80px;
      }
    }
  }

  .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    padding: 80px 20px;
    background: #fff;

    .feature-item {
      text-align: center;
      padding: 30px;
      border-radius: 8px;
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-5px);
      }

      .feature-icon {
        font-size: 3em;
        color: #409EFF;
        margin-bottom: 20px;
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.6s ease;

        &.animate-in {
          opacity: 1;
          transform: scale(1);
        }
      }

      h3 {
        margin-bottom: 15px;
        color: #333;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease 0.2s;

        &.animate-in {
          opacity: 1;
          transform: translateY(0);
        }
      }

      p {
        color: #666;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease 0.4s;

        &.animate-in {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }

  .latest-articles {
    padding: 80px 20px;
    background: #f8f9fa;

    .section-title {
      text-align: center;
      margin-bottom: 50px;
      font-size: 2em;
      color: #333;
    }

    .article-list {
      max-width: 800px;
      margin: 0 auto;
    }

    .article-item {
      background: white;
      border-radius: 8px;
      margin-bottom: 30px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      opacity: 0;
      transform: translateX(-30px);
      transition: all 0.6s ease;

      &.animate-in {
        opacity: 1;
        transform: translateX(0);
      }

      .article-content {
        padding: 25px;

        h3 {
          margin-bottom: 15px;
          color: #333;
        }

        p {
          color: #666;
          margin-bottom: 20px;
        }

        .article-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .date {
            color: #999;
          }
        }
      }
    }
  }

  .cta-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;

    .cta-content {
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease;

      &.animate-in {
        opacity: 1;
        transform: translateY(0);
      }

      h2 {
        font-size: 2em;
        margin-bottom: 20px;
      }

      p {
        margin-bottom: 40px;
        opacity: 0.9;
      }

      .qrcode-container {
        .qrcode {
          width: 200px;
          height: 200px;
          margin: 0 auto;
          background: white;
          padding: 10px;
          border-radius: 8px;
        }
      }
    }
  }
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 移动端样式
@media screen and (max-width: 768px) {
  .home {
    .banner {
      padding: 80px 15px 120px;

      .animate-title {
        font-size: 2.5em;
      }

      .animate-subtitle {
        font-size: 1.2em;
      }
    }

    .features {
      padding: 40px 15px;
      gap: 20px;
    }

    .latest-articles {
      padding: 40px 15px;

      .section-title {
        font-size: 1.5em;
        margin-bottom: 30px;
      }
    }

    .cta-section {
      padding: 60px 15px;

      .cta-content {
        h2 {
          font-size: 1.5em;
        }

        .qrcode-container {
          .qrcode {
            width: 150px;
            height: 150px;
          }
        }
      }
    }
  }
}
</style> 